<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 50px;
        }
    </style>
</head>
<body>
    <!--
        属性节点(html属性 => 标签内可见的)
        (1)写在标签内,和标签名以一个空格分隔叫做属性, 
        (2)组成: 属性名="属性值" 
        (3)属性可以没有也可以有多个,多个之间用空格分隔
            属性是对标签的说明 
    -->
    <div id="demo" class="box one two three" title="hello" data-id="0" data-msg="abc" data-index="0" asd="zxc" style="width:400px;height:400px;background-color: red;">
        <span>这是标签内的文本</span>
    </div>
</body>
<script>
    /* 
        属性节点(html属性 => 标签内可见的)
            (1)写在标签内,和标签名以一个空格分隔叫做属性, 
            (2)组成: 属性名="属性值" 
            (3)属性可以没有也可以有多个,多个之间用空格分隔
                属性是对标签的说明  

        操作属性节点:
            box.setAttribute(key,value)
            box.getAttribute(key)
            box.removeAttribute(key)
    */

    /* 
        元素节点的属性 (元素节点的内置属性和方法 => 官方定义)
        (1) 元素节点也是一个对象类型的数据(引用类型),  有自己的属性和方法
        (2) 每个元素节点都是一个特殊的对象,官方给每个元素内置的属性和方法

        元素节点的属性
            Element.parentElement
            Element.children
            Element.previousElementSibling
            Element.nextElementSibling
            Element.innerHTML
            Element.innerText

             innerHTML   获取和设置元素内的html结构(标签和文本)
            innerText   获取和设置元素内的文本结构(文本)
            textContent   获取和设置元素内的文本结构(文本)  => 只能设置文本,如果包含html结构,会原样输出

            了解
            outerHTML   获取和设置元素本身及其内部的html结构(标签和文本)
            outerText   获取和设置元素本身及其内部的文本结构

            id    获取和设置元素的id名
            className   获取和设置元素的class名
            classList  获取元素的class列表(伪数组)  => 内部有增删改查class名的方法
            title  获取和设置元素的title属性
            style  获取和设置元素的内联样式/行内样式
            style取值 => 只能获取内联样式/行内样式


        元素节点的方法
            Element.setAttribute(key,value)
            Element.getAttribute(key)
            Element.removeAttribute(key)
    
    */

    var box = document.querySelector(".box");
    // console.log(box,typeof box); // []   box

    console.dir(box); // 以键值对的形式打印对象(可以看到对象中的属性和方法)


    // dataset  数据集(用于存储html5新增自定义属性(data-xxx)数据的集合)
    console.log(box.dataset);

    // 对应属性名取值
    console.log(box.dataset.id);
    console.log(box.dataset.msg);
    console.log(box.dataset.index);

    // 对应属性名赋值  (有就修改,没有就新增)
    box.dataset.id = "100";
    box.dataset.msg = "ABC";
    box.dataset.index = "001";
    box.dataset.laowang = "js";

</script>
</html>